<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery-2.1.1.min.js"></script>
    <title>卿屿</title>
    <style type="text/css">
        @media screen and (min-width: 320px) and (max-width: 1156px){
            .talk_con_mob{
                width:600px;
                height:500px;
                border:1px solid #666;
                margin:50px auto 0;
                background:#f9f9f9;
            }
            .talk_show_mob{
                width:580px;
                height:420px;
                border:1px solid #666;
                background:#fff;
                margin:10px auto 0;
                overflow:auto;
            }
            .talk_input_mob{
                width:580px;
                margin:10px auto 0;
            }
            .talk_word_mob{
                width:420px;
                height:26px;
                padding:0px;
                float:left;
                margin-left:10px;
                outline:none;
                text-indent:10px;
            }
        }
        .talk_con{
            width:600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }
        .talk_sub{
            width:56px;
            height:30px;
            float:right;
            margin-right:10px;
        }
        .atalk{
            margin:10px;
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
</head>
<body class="back">
<div style="text-align: center;">
	<span>【我的ID】：
	<span><input id="userId" name="userId" type="text"></span>
	<span>【接收人id】：
	<span><input id="toUserId" name="toUserId" type="text"></span>
	<span>
	<span>
	    <button onclick="openSocket()">开启socket</button>
	</span>
	<span>
	<span>
	    <button onclick="openSocket()">关闭socket</button>
	</span>
</div>
<div class="talk_con" id="talk_con_id">
    <div class="talk_show" id="liaotianshi">
        <!--- div class="btalk"><span id="bsay">用户说：还没呢，你呢？</span></div --->
    </div>
    <div class="talk_input">
        <input id="contentText" class="talk_word" name="contentText" type="text">
        <input type="button" value="发送" class="talk_sub" onclick="sendMessage()">
    </div>
</div>
</body>
<script>
    var myDate = new Date;
    var year = myDate.getFullYear(); //获取当前年
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    var h = myDate.getHours();//获取当前小时数(0-23)
    var m = myDate.getMinutes();//获取当前分钟数(0-59)
    var s = myDate.getSeconds();//获取当前秒
    var now = year+"-"+mon+"-"+date+" "+h+":"+m+":"+s;

    var socket;

    function openSocket() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            var userId = document.getElementById('userId').value;

            var socketUrl = "ws://localhost:8088/webSocket/" + userId;
            console.log(socketUrl);
            if (socket != null) {
                socket.close();
                socket = null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function () {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                var serverMsg = "收到服务端信息：" + msg.data;
                console.log(serverMsg);
                //发现消息进入    开始处理前端触发逻辑
                //把我收到的消息放入聊天室
                $("#liaotianshi").append("<div style='text-align:left'>"+now+"<br>"+msg.data+"</div>")
            };
            //关闭事件
            socket.onclose = function () {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function () {
                console.log("websocket发生了错误");
            }
        }
    }

    //7. 主动发消息
    function sendMessage() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            // console.log("您的浏览器支持WebSocket");
            var toUserId = document.getElementById('toUserId').value;
            var contentText = document.getElementById('contentText').value;
            var msg = '{"toUserId":"' + toUserId + '","contentText":"' + contentText + '"}';
            console.log(msg);
            socket.send(msg);
            //把我发的消息放入聊天室
            $("#liaotianshi").append("<div style='text-align:right'>"+now+"<br>"+contentText+"</div>")
        }
    }
    function close() {
        websocket.close();
    }
</script>
</html>